<template>
  <el-card shadow="never">
    <ul class="qy-flex">
      <template v-for="(item,index) in fourEnterprises">
        <li :style="setStyle(item,index)" @click="setCurrentIndex(index)">
          <div class="corner-marker" :style="{backgroundImage:`url(${item.markerBg})`}">查看企业 ▸</div>
          <div class="fo-body">
            <div>
              <el-image style="width: 56px;height: 56px" :src="item.icon"></el-image>
            </div>
            <div>
              <strong :style="{color:item.color}">{{ item.num }}</strong> <small>家</small>
              <br>
              <span>{{ item.title }}</span>
            </div>
          </div>
        </li>
      </template>
    </ul>
    <br>
    <el-row :gutter="10">
      <el-col :span="16">
        <div class="qy-box">
          <div class="qy-title">
            <strong>区域分布</strong>
          </div>
          <el-row :gutter="10">
            <el-col :span="18">
              <div class="qy-item" style="border: 1px solid #efefef">
                <four-map></four-map>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="qy-item">
                <el-table :data="companyDis" height="500">
                  <el-table-column type="index" label="排序" width="80" align="center">
                    <template #default="scope">
                      <span v-if="scope.$index < 3">
                       <el-image style="width: 30px;height: 30px" :src="rankingImages(scope.$index)"></el-image>
                        </span>
                      <span v-else>
                        {{ scope.$index + 1 }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="deptName" label="区域"/>
                  <el-table-column prop="companyNum" label="企业家数" width="100" align="center"/>
                </el-table>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="qy-box">
          <div class="qy-title">
            <strong>阶段分布</strong>
          </div>
          <div class="qy-item">
            <general-trend-echarts :tableData="companyTrend"></general-trend-echarts>
          </div>
        </div>
      </el-col>
    </el-row>
    <br>
    <ul class="fo-fen">
      <li>
        <div class="qy-title">
          <strong>八大产业分布</strong>
        </div>
        <industrial-distribution :tableData="companyIndustryDis"></industrial-distribution>
      </li>
      <li>
        <div class="qy-title">
          <strong>行业分布</strong>
        </div>
        <industry-distribution :tableData="IndustryDistributionList"></industry-distribution>
      </li>
      <li>
        <div class="qy-title">
          <strong>年龄分布</strong>
        </div>
        <age-distribution :tableData="companyRegisterDis"></age-distribution>
      </li>
      <li>
        <div class="qy-title">
          <strong>注资分布</strong>
        </div>
        <distribution-of-capital-injection :tableData="companyCapitalDis"></distribution-of-capital-injection>
      </li>
      <li>
        <div class="qy-title">
          <strong>参保分布</strong>
        </div>
        <distribution-of-insured-individuals :tableData="companyStaffSizeDis"></distribution-of-insured-individuals>
      </li>
    </ul>
  </el-card>
  <br>
  <el-card shadow="never">
    <div class="qy-title">
      <strong>企业分析</strong>
    </div>
    <ul class="fo-fen">
      <li>
        <div class="qy-title">
          <strong>八大产业分布</strong>
        </div>
        <ul class="fo-fu">
          <li>
            <div>
              <span>覆盖企业</span>
              <br>
              <strong>1017</strong><small>家</small>
            </div>
            <div>
              <covering-enterprises></covering-enterprises>
            </div>
          </li>
          <li>
            <div>
              <span>覆盖土地</span>
              <br>
              <strong>726</strong><small>宗</small> / <strong>11188741.6</strong><small>㎡</small>
            </div>
            <div></div>
          </li>
        </ul>
      </li>
      <li>
        <using-a-map-table></using-a-map-table>
      </li>
      <li>
        <div class="qy-title">
          <strong>科技创新分析</strong>
        </div>
        <ul class="fo-fu">
          <li>
            <div>
              <span>科技创新企业</span>
              <br>
              <strong>314</strong><small>家</small>
            </div>
            <div>
              <covering-enterprises></covering-enterprises>
            </div>
          </li>
          <li>
            <div style="width: 60%;">
              <span>科技创新成果</span>
              <br>
              <strong>1476</strong><small>宗</small>
            </div>
          </li>
        </ul>
      </li>
      <li>
        <patent-information></patent-information>
      </li>
      <li>
        <innovation-trends></innovation-trends>
      </li>
    </ul>
  </el-card>
</template>
<script setup>

import {
  companyCapitalDisData,
  companyDisData,
  companyIndustryDisData,
  companyRegisterDisData,
  companyStaffSizeDisData,
  companyTrendData,
  fourEnterprises,
  IndustryDistributionData
} from '../data/data.js'
import {ref} from "vue";
import {rankingImages} from "@/utils/index.js";
import FourMap from "@/views/enterpriseCultivation/components/fourMap.vue";
import GeneralTrendEcharts from "@/views/enterpriseCultivation/Echarts/GeneralTrendEcharts.vue";
import IndustrialDistribution from "@/views/enterpriseCultivation/Echarts/IndustrialDistribution.vue";
import IndustryDistribution from "@/views/enterpriseCultivation/Echarts/IndustryDistribution.vue";
import AgeDistribution from "@/views/enterpriseCultivation/Echarts/AgeDistribution.vue";
import DistributionOfCapitalInjection from "@/views/enterpriseCultivation/Echarts/DistributionOfCapitalInjection.vue";
import DistributionOfInsuredIndividuals
  from "@/views/enterpriseCultivation/Echarts/DistributionOfInsuredIndividuals.vue";
import CoveringEnterprises from "@/views/enterpriseCultivation/Echarts/CoveringEnterprises.vue";
import UsingAMapTable from "@/views/enterpriseCultivation/Echarts/UsingAMapTable.vue";
import PatentInformation from "@/views/enterpriseCultivation/Echarts/PatentInformation.vue";
import InnovationTrends from "@/views/enterpriseCultivation/Echarts/InnovationTrends.vue";

const currentIndex = ref(null)
const companyTrend = ref(companyTrendData[0])
const companyDis = ref(companyDisData[0])
const companyIndustryDis = ref(companyIndustryDisData[0])
const IndustryDistributionList = ref(IndustryDistributionData[0])
const companyRegisterDis = ref(companyRegisterDisData[0])
const companyCapitalDis = ref(companyCapitalDisData[0])
const companyStaffSizeDis = ref(companyStaffSizeDisData[0])

const setStyle = (row, index) => {
  return {
    backgroundImage: `url(${row.bgImg})`,
    backgroundColor: index === currentIndex.value ? row.bgColor : ''
  }
}

const setCurrentIndex = (index) => {
  currentIndex.value = index
  companyTrend.value = companyTrendData[index]
  companyDis.value = companyDisData[index]
  companyIndustryDis.value = companyIndustryDisData[index]
  IndustryDistributionList.value = IndustryDistributionData[index]
  companyRegisterDis.value = companyRegisterDisData[index]
  companyCapitalDis.value = companyCapitalDisData[index]
  companyStaffSizeDis.value = companyStaffSizeDisData[index]
}


</script>


<style scoped lang="scss">
.qy-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  li {
    width: 330px;
    height: 140px;
    border: 1px solid #ebeff5;
    border-radius: 5px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    &::before {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 40px;
      width: 20px;
      height: 20px;
      background-color: inherit;
      transform: rotate(45deg);
    }

    &:first-child {
      width: 440px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .fo-body {
      width: 80%;
      display: flex;
      align-items: center;

      > div:last-child {
        margin-left: 10px;

        strong {
          font-size: 30px;
        }

        small {
          color: #999999;
        }
      }
    }

    .corner-marker {
      position: absolute;
      right: 0;
      top: 0;
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      border-bottom-left-radius: 15px;
      background-position: top;
      background-repeat: no-repeat;
      background-size: cover;
      background-color: #efefef;
    }
  }
}

.qy-box {
  padding: 10px;
  background-color: #f7f8fa;

  .qy-item {
    height: 500px;
    background-color: #ffffff;
  }
}

.qy-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  > strong {
    font-size: 16px;
    border-left: 4px solid #1e87f0;
    padding-left: 10px;
  }
}

.fo-fen {
  height: 300px;
  display: flex;
  justify-content: space-between;

  > li {
    width: calc(100% / 5 - 10px);
    height: 300px;
  }
}

.fo-fu {
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 14px;

  li {
    height: 115px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9fafc;

    strong {
      font-size: 20px;
    }
  }

  > li:first-child {
    > div:first-child {
      margin-right: 20px;
    }

    > div:last-child {
      width: 100px;
      height: 100px;
    }
  }
}

</style>
